<template>
  <div>
    <!-- 表头 -->
    <div class="inde_top">维权列表</div>
    <!-- 表格内容 -->
    <div class="list_int">
      <div class="list_items">
        <!-- 上列表 -->
        <div class="items_top">
          <div class="int_left">商城</div>
          <div class="int_right">
            <span style="font-weight: bold; margin-right: 10px">2020-01-07</span>
            <span style="font-weight: bold; margin-right: 10px">11:12:13</span>
            <span style="color: #adabaf">订单编号：MZ12546584587</span>
          </div>
        </div>
        <!-- 下列表 -->
        <div class="cont_int">
          <div class="images">
            <div style="margin-right: 10px"><img src="http://127.0.0.1:7001/public/username/2.jpg" alt="" /></div>
            <div class="ceshi">测试商品</div>
            <div class="hang">
              <span style="position: relative; top: 14px">￥0.01</span>
              <br />
              <span style="position: relative; top: 14px; margin-left: 20px">*1</span>
            </div>
          </div>
          <!-- 测试 -->
          <div class="ceshis">
            <span>售后培训零零幺</span>
            <br />
            <span>1315457548</span>
          </div>
          <!-- 2 -->
          <div class="ceshis">
            <span>微信支付</span>
            <br />
            <span>快递</span>
          </div>
          <!-- 3 -->
          <div class="ceshis">
            <span>￥0.01</span>
          </div>
          <!-- 4 -->
          <div class="ceshis">
            <span style="color: blue">查看详情</span>
            <br />
            <span style="color: blue">维权处理</span>
          </div>
          <div class="jeiguo">已维权</div>
        </div>
        <!-- 底 -->
        <div class="inde_bot">
          <span style="margin-right: 20px">商品名称:</span>
          <span>我是一个店铺</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.inde_top {
  width: 100px;
  height: 40px;
  background: #ff9800;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: white;
  margin-bottom: 40px;
}
.list_int {
  width: 100%;
  height: 400px;
  //list中列表每一项
  .list_items {
    width: 100%;
    height: 120px;
    border: 1px solid #ddd;
    //top
    .items_top {
      width: 100%;
      height: 30px;
      background: #f7f7f7;
      display: flex;
      .int_left {
        width: 30px;
        height: 20px;
        position: relative;
        top: 3px;
        left: 20px;
        border: 1px solid #5f88ff;
        color: #5f88ff;
        box-sizing: border-box;
        text-align: center;
        line-height: 20px;
      }
      .int_right {
        margin-left: 30px;
        line-height: 30px;
      }
    }
    //cont
    .cont_int {
      width: 100%;
      height: 60px;
      display: flex;
      border-bottom: 1px solid #ddd;
      .images {
        width: 25%;
        height: 100%;
        padding: 3px 3px 3px 20px;
        border-right: 1px solid #ddd;
        box-sizing: border-box;
        display: flex;
        line-height: 60px;
        img {
          width: 40px;
          height: 50px;
        }
        .ceshi {
          width: 100px;
          height: 100%;
          margin-right: 30px;
        }
        .hang {
          line-height: normal;
        }
      }
      //策试
      .ceshis {
        width: 14%;
        height: 100%;
        border-right: 1px solid #ddd;
        text-align: center;
        padding: 18px 0 0 0;
        box-sizing: border-box;
      }
      //结果
      .jeiguo {
        width: 19%;
        line-height: 60px;
        text-align: center;
        color: green;
      }
    }
    //bottom
    .inde_bot {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-indent: 20px;
    }
  }
}
</style>
